/**
 * 组件名称：主题切换组件
 * 使用场景：切换主题
 * 功能介绍：默认auto，手动选择light/dark后将切换系统主题为light/dark
 * 功能进度：100%
 * 待办事项：无
 */

"use client";

import {rem, Tooltip, ActionIcon, useMantineColorScheme} from "@mantine/core";
import {IconSun, IconMoon} from "@tabler/icons-react";

export const IpdThemeChange = () => {
  const {setColorScheme} = useMantineColorScheme();

  return (
    <div>
      <Tooltip label="点击变亮" withArrow transitionProps={{transition: "fade", duration: 300}}>
        <ActionIcon
          onClick={() => setColorScheme("dark")}
          variant="default"
          size="lg"
          radius="md"
          aria-label="Set dark theme."
          darkHidden
        >
          <IconMoon style={{width: rem(22), height: rem(22)}} stroke={1.5} />
        </ActionIcon>
      </Tooltip>
      <Tooltip label="点击变暗" transitionProps={{transition: "fade", duration: 300}}>
        <ActionIcon
          onClick={() => setColorScheme("light")}
          variant="default"
          size="lg"
          radius="md"
          aria-label="Set dark theme."
          lightHidden
        >
          <IconSun style={{width: rem(22), height: rem(22)}} stroke={1.5} />
        </ActionIcon>
      </Tooltip>
    </div>
  );
};
